<template>
	<!-- 封装的字典下拉选择 -->
	<div class="fdict flexaic" :id="inputID" :class="{'nullplacer':!value}">
		<!-- 单列选择器 -->
		<picker :value="newvalue" @cancel='changeicon(false)' @change="changevalue" class="pickervalue" mode="selector"
			:range-key="rangekey" :range="dictlist" :disabled="disabled">
			<div class="isvalue" @click="changeicon(true)">{{dictlist[newvalue][rangekey]||placeholder}}</div>
		</picker>
		<!-- 输入框前边的图标 -->
		<div class="iconfont icon-jinru" :class="{expand:expand===true}" />
	</div>
</template>

<script>
	export default {
		name: 'fdict', //封装的字典下拉选择
		props: {
			// 组件标识符
			inputID: {
				type: [String],
			},
			// 输入框初始内容
			value: {
				type: [String, Number],
			},
			// picker 的类型,默认selector
			type: {
				type: [String],
				default: 'selector'
			},
			// 选择器显示内容
			rangekey: {
				type: [String],
				default: 'title'
			},
			// valuekey
			valuekey: {
				type: [String],
				default: 'value'
			},
			// 是否禁用
			disabled: {
				type: [Boolean],
				default: false
			},
			// 输入框默认输入内容
			placeholder: {
				type: [String],
				default: '请选择'
			},
			// 字典code
			dictcode: {
				type: [String],
			},
			// 是否是必填，必填不会把请选择添加到选项值中
			rules: {
				type: [Boolean],
				default: true
			}
		},
		data() {
			return {
				dictlist: [], //字典数组
				newvalue: null, //当前选择值
				expand: false,
			}
		},
		watch: {
			// 初始化同步数据 
			value: {
				handler(newName, oldName) {
					this.newvalue = this.getindex(newName);
				},
				deep: true,
				immediate: true
			}
		},
		created() {
			// 获取字典数据
			this.getdictlist()
		},
		methods: {
			// 点击事件，改变三角样式
			changeicon(type) {
				this.expand = type
			},
			// 设置当前值
			getindex() {
				var index = this.dictlist.findIndex(item => item[this.valuekey] === this.value)
				if (index === -1) index = null
				return index
			},
			// 更新选中值
			changevalue(e) {
				this.expand = false
				this.newvalue = e.detail.value
				this.$emit("update:value", this.dictlist[e.detail.value][this.valuekey])
				this.$emit('change')
			},
			// 获取字典数据
			async getdictlist() {
				let list
				if (this.dictcode === 'statuRange') {
					list = [{
							value: '-1',
							title: '待分配告警'
						},
						{
							value: '5',
							title: '自动恢复告警'
						},
						{
							value: '6',
							title: '已忽略告警'
						},
						{
							value: '0',
							title: '已分配告警'
						},
					]
				} else if (this.dictcode === 'userlistdictcode') {
					list = await this.base.getUserList({})
				} else {
					list = await this.base.getDictList(this.dictcode)
				}
				// 输入框初始内容
				if (this.rules === false) {
					var obj = {}
					obj[this.valuekey] = ''
					obj[this.rangekey] = this.placeholder
					list.unshift(obj)
				}
				this.dictlist = [...list]
			}
		}
	}
</script>

<style lang="less" scoped>
	// 封装的字典下拉选择
	.fdict {
		width: 100%;

		.pickervalue {
			flex: 1;
		}

		.icon-jinru {
			color: #203256;
		}

		.expand {
			transform: rotate(180deg);
		}
	}

	.nullplacer {
		.isvalue {
			color: #808080;
		}

		.icon-jinru {
			color: #808080;
		}
	}
</style>